require('./PageJlEdit.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import {Control} from 'react-keeper'
import EngSelect from './../engselect'
import {
  Button, Page, Panel, PanelHeader, PanelBody, PanelFooter, ButtonArea, MediaBox, Cells, PullToRefresh,
  Cell, CellHeader, MediaBoxTitle, MediaBoxHeader, MediaBoxDescription, MediaBoxBody, MediaBoxInfo,
  MediaBoxInfoMeta, Input, CellsTips, Icon, Label, CellsTitle, Toptips, Toast, Dialog, FooterLink, Article,
  CellBody, CellFooter, Form, FormCell, Radio, Gallery, GalleryDelete, Uploader, TextArea, SearchBar, PreviewItem
} from 'react-weui/build/packages'
import AMap from './../../../components/amap'
import inputtp from './../../../assets/icon/输入.png';

class JlEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,

      showAndroid2: false,
      showAndroid3: false,
    }
    this.showLoading = this.showLoading.bind(this);
    this.hideDialog2 = this.hideDialog2.bind(this);
    this.hideDialog3 = this.hideDialog3.bind(this);


    this.goselecteng = this.goselecteng.bind(this);
    this.onEngFetch = this.onEngFetch.bind(this);
    this.setSelectEng = this.setSelectEng.bind(this);

    this.sgjdChange = this.sgjdChange.bind(this);
    this.tqqkChange = this.tqqkChange.bind(this);
    this.tqwdChange = this.tqwdChange.bind(this);

    this.qksgChange = this.qksgChange.bind(this);
    this.qksgBlur = this.qksgBlur.bind(this);
    this.qkjlChange = this.qkjlChange.bind(this);
    this.qkjlBlur = this.qkjlBlur.bind(this);
    this.qkwtChange = this.qkwtChange.bind(this);
    this.qkwtBlur = this.qkwtBlur.bind(this);
    this.qklsChange = this.qklsChange.bind(this);
    this.qklsBlur = this.qklsBlur.bind(this);
    this.qkqtChange = this.qkqtChange.bind(this);
    this.qkqtBlur = this.qkqtBlur.bind(this);

    this.saveInfo = this.saveInfo.bind(this);
    this.upInfo = this.upInfo.bind(this);
    this.goHome = this.goHome.bind(this);
    this.goList = this.goList.bind(this);
  }

  goList() {
    Control.go('/myyewu/rizhijllist', this.state.rzstore.currentEng);
  }

  goHome() {
    Control.go('/myyewu/rizhilist');
  }

  hideDialog2() {
    this.setState({showAndroid2: false});
  }

  hideDialog3() {
    this.setState({showAndroid3: false});
  }

  saveInfo() {
    //this.showLoading();
    this.setState({showAndroid2: false, showAndroid3: false});
    Actions.saveInfo();
  }

  upInfo() {
    this.setState({showAndroid2: false, showAndroid3: false});
    Actions.upInfo();
  }

  showLoading() {
    this.setState({showLoading: true});

    this.state.loadingTimer = setTimeout(() => {
      this.setState({showLoading: false});
    }, 2000);
  }


  sgjdChange(e) {
    Actions.sgjdChange(e.target.value);
  }

  tqqkChange(e) {
    Actions.tqqkChange(e.target.value);
  }

  tqwdChange(e) {
    Actions.tqwdChange(e.target.value);
  }

  qksgChange(e) {
    Actions.qksgChange(e.target.value);
  }

  qksgBlur(e) {
    Actions.qksgChange(e.target.value);
  }

  qkjlChange(e) {
    Actions.qkjlChange(e.target.value);
  }

  qkjlBlur(e) {
    Actions.qkjlChange(e.target.value);
  }

  qkwtChange(e) {
    Actions.qkwtChange(e.target.value);
  }

  qkwtBlur(e) {
    Actions.qkwtChange(e.target.value);
  }

  qklsChange(e) {
    Actions.qklsChange(e.target.value);
  }

  qklsBlur(e) {
    Actions.qklsChange(e.target.value);
  }

  qkqtChange(e) {
    Actions.qkqtChange(e.target.value);
  }

  qkqtBlur(e) {
    Actions.qkqtChange(e.target.value);
  }

  goselecteng() {
    Control.go('/myyewu/engselect');
  }

  setSelectEng(obj) {
    console.log('返回');
    console.info(obj);
    Actions.setCurrentEng(obj);
  }

  onEngFetch(obj, callback) {
    console.info('engfetch');
  }

  render() {
    let t = this;
    let editheight = window.screen.height - 200;
    let viewheight = window.screen.height - 220;
    console.log('监理日志子组件');

    return (
      <div className="page jledit">
        <div>1</div>
        <div style={{
          height: window.screen.height - 170,
          background: '#fff'
        }}>
          <PullToRefresh>
            <Panel>
              <PanelHeader>
                <div className="title-bg"/>
                监理日志
              </PanelHeader>
              <PanelBody>
                <MediaBox type="appmsg">

                  <MediaBoxBody>
                    <MediaBoxTitle>
                      {this.state.rzstore.currentEng.engName}
                    </MediaBoxTitle>
                    <MediaBoxDescription>
                      <p style={{paddingTop: '5px'}}>{this.state.rzstore.currentEng.engSgdw}</p>
                      <p style={{paddingTop: '5px'}}>{new Date(this.state.rzstore.jlmode.jlrq).toLocaleString()}</p>

                    </MediaBoxDescription>
                  </MediaBoxBody>
                  <CellFooter style={{position: 'relative', marginRight: '10px'}}>
                    <img src={inputtp} alt="" style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                  </CellFooter>
                </MediaBox>
              </PanelBody>
              <PanelFooter>
                <Cell access link onClick={e => {
                  if (!this.state.rzstore.isUpload) {
                    this.refs.engselect.getCurrentEng()
                  }
                }}>
                  <CellBody/>
                  <CellFooter><h5>选择工程</h5></CellFooter>
                </Cell>
              </PanelFooter>


              <PanelHeader>
                <CellsTitle>
                  <p style={{color: 'red', marginRight: '5px'}}>
                    {'10点之前只能填写昨天的日志，10点之后填写今天的日志。'}
                  </p>
                </CellsTitle>
              </PanelHeader>


              <PanelHeader>
                施工进度
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                    <TextArea placeholder="请输入" onChange={this.sgjdChange.bind(this)} showCounter={false}
                              value={this.state.rzstore.jlmode.sgjd} rows="2"
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                天气情况
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                    <TextArea placeholder="请输入" onChange={this.tqqkChange.bind(this)} showCounter={false}
                              value={this.state.rzstore.jlmode.tqqk} rows="1"
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>


              <PanelHeader>
                气温(℃)最低/最高
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                    <TextArea placeholder="请输入" onChange={this.tqwdChange.bind(this)} showCounter={false}
                              value={this.state.rzstore.jlmode.qwqk} rows="1"
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>


                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                施工进展情况
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                    <TextArea placeholder="请输入" onChange={this.qksgChange.bind(this)} showCounter={false}
                              value={this.state.rzstore.jlmode.sgjzqk} rows="3"
                              onBlur={this.qksgBlur}
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                监理工作情况
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qkjlChange.bind(this)} showCounter={false}
                                  value={this.state.rzstore.jlmode.jlgzqk} rows="3"
                                  onBlur={this.qkjlBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                存在问题及处理情况
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qkwtChange.bind(this)} showCounter={false}
                                  value={this.state.rzstore.jlmode.czwt} rows="3"
                                  onBlur={this.qkwtBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                监理指令发出及落实情况
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qklsChange.bind(this)} showCounter={false}
                                  value={this.state.rzstore.jlmode.jlzl} rows="3"
                                  onBlur={this.qklsBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>

              <PanelHeader>
                其他事项
              </PanelHeader>
              <PanelBody>
                <MediaBox type="small_appmsg">
                  <Cell>
                    <CellHeader>
                      <img src={inputtp}
                           style={{
                             width: '20px',
                             marginRight: '5px',
                             display: 'block'
                           }}/>
                    </CellHeader>
                    <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qkqtChange.bind(this)} showCounter={false}
                                  value={this.state.rzstore.jlmode.qzsx} rows="3"
                                  onBlur={this.qkqtBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                    </CellBody>
                  </Cell>
                </MediaBox>
              </PanelBody>
              <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.rzstore.position}></AMap>
              <EngSelect ref="engselect" onSelectEng={this.setSelectEng}
                         currentEng={this.state.rzstore.currentEng}></EngSelect>
              <Toast icon="loading" show={this.state.showLoading}>保存中...</Toast>
              <Toptips type="warn" show={this.state.rzstore.showWarn} className="warn-div">
                <Icon value="warn"/>{this.state.rzstore.warnMessage}
              </Toptips>
            </Panel>
          </PullToRefresh>

        </div>
        <div style={{padding: '-20px'}}>
          <ButtonArea direction="horizontal">
            <Button type="warn"
                    onClick={e => this.setState({showAndroid3: true})}
                    disabled={this.state.rzstore.isUpload}
                    className={this.state.rzstore.isNew ? 'edithide' : 'editshow'}> 提交</Button>
            <Button type="primary" onClick={e => this.setState({showAndroid2: true})}
                    disabled={this.state.rzstore.isUpload}
                    className={this.state.rzstore.isNew ? 'editshow' : 'editshow'}>保存</Button>
          </ButtonArea>

          <Dialog type="android" title={'操作'} show={this.state.showAndroid2}
                  buttons={[
                    {
                      type: 'default',
                      label: '取消',
                      onClick: this.hideDialog2
                    },
                    {
                      type: 'primary',
                      label: '确定',
                      onClick: this.saveInfo
                    }
                  ]}
          >
            是否保存?
          </Dialog>
          <Dialog type="android" title={'操作'} show={this.state.showAndroid3}
                  buttons={[
                    {
                      type: 'default',
                      label: '取消',
                      onClick: this.hideDialog3
                    },
                    {
                      type: 'primary',
                      label: '确定',
                      onClick: this.upInfo
                    }
                  ]}
          >
            是否提交?(提交成功后无法更改数据)
          </Dialog>
        </div>
      </div>
    );
  }


  notice() {
  }


  componentWillMount() {
    let t = this;
    if (Control.state) {
      console.log('有值');
      Actions.loadMode(Control.state);
    }
    else {
      console.log('无值');
      Actions.initMode();
    }

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.jlmode || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

JlEdit.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
  urlShow: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(JlEdit, Reflux.connect(Store, 'rzstore'));


export default JlEdit;
